<template>
  <div class="order" style="width: 100%; height: 340px">
    <div class="title">各地产品类别订单明细</div>
    <div class="order-table">
      <el-table :data="tableData" style="width: 100%" height="300">
        <!-- 一级 -->
        <el-table-column label="" width="188" fixed>
          <el-table-column  prop="product" label="产品类别" width="90">
          </el-table-column>
          <el-table-column  prop="item" label="产品子类别" width="98">
          </el-table-column>
        </el-table-column>
        <!-- 一级 -->
        <el-table-column label="东北">
          <el-table-column prop="jilin" label="吉林" width="90">
          </el-table-column>
          <el-table-column prop="liaoning" label="辽宁" width="90">
          </el-table-column>
          <el-table-column prop="heilongjiang" label="黑龙江" width="90">
          </el-table-column>
        </el-table-column>
        <!-- 一级 -->
        <el-table-column label="华东">
          <el-table-column prop="shanghai" label="上海	" width="90"> </el-table-column>
          <el-table-column prop="anhui" label="安徽" width="90"> </el-table-column>
          <el-table-column prop="shandong" label="山东" width="90"> </el-table-column>
          <el-table-column prop="jiangsu" label="江苏" width="90"> </el-table-column>
          <el-table-column prop="jiangxi" label="江西" width="90"> </el-table-column>
          <el-table-column prop="zhejiang" label="浙江" width="90"> </el-table-column>
          <el-table-column prop="fujian" label="福建" width="90"> </el-table-column>
        </el-table-column>
        <!-- 一级 -->
        <el-table-column label="华中">
          <el-table-column prop="henan" label="河南" width="90"> </el-table-column>
          <el-table-column prop="hubei" label="湖北" width="90"> </el-table-column>
          <el-table-column prop="hunan" label="湖南" width="90"> </el-table-column>
        </el-table-column>
        <!-- 一级 -->
        <el-table-column label="华南">
          <el-table-column prop="neimenggu" label="内蒙古" width="90"> </el-table-column>
          <el-table-column prop="beijin" label="北京" width="90"> </el-table-column>
          <el-table-column prop="tianjin" label="天津" width="90"> </el-table-column>
          <el-table-column prop="shanxi" label="山西" width="90"> </el-table-column>
          <el-table-column prop="hebei" label="河北" width="90"> </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          // 产品类别
          // product: '办公用品',
          // 产品子类别
          item: '文具',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        },
        {
          // 产品类别
          product: '办公用品',
          // 产品子类别
          item: '电脑',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        }, {
          // 产品类别
          // product: '办公用品',
          // 产品子类别
          item: '耗材',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        }, {
          // 产品子类别
          item: '厨具',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        }, {
          // 产品类别
          product: '家居',
          // 产品子类别
          item: '家具',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        },
        {
          // 产品子类别
          item: '家纺',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        },
        {
          // 产品子类别
          item: '洗衣机',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        },
        {
          product: '家用电器',
          // 产品子类别
          item: '电视',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        },
        {
          // 产品子类别
          item: '空调',
          jilin: '10000',
          liaoning: '11000',
          heilongjiang: '11200',
          shanghai: '13000',
          anhui: '13000',
          shandong: '13000',
          jiangsu: '13000',
          jiangxi: '13000',
          zhejiang: '13000',
          fujian: '13000',
          henan: '13000',
          hubei: '13000',
          hunan: '13000',
          neimenggu: '13000',
          beijin: '13000',
          tianjin: '13000',
          shanxi: '13000',
          hebei: '13000'
        }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
/deep/.el-table thead.is-group th.el-table__cell {
      background-color: rgb(215 ,197 ,217);
    }
/deep/.cell {
        color:rgba(51, 51, 51, 0.85);
        text-align: center;
      }
/deep/.el-table__body {
        font-size: 12px;
      }
.order {
  .title {
    padding-left: 8px;
    height: 40px;
    line-height: 40px;
    color: rgb(85, 85, 85);
  }
  .order-table {
    width: 1490px;
    height: 293px;
    // background-color: pink;
    margin-left: 8px;
    .el-table {
      font-size: 13px;
      /deep/.el-table__cell {
        padding: 5px 0;
      }
    }
  }
}
</style>
